<template>
<view class="page">
	<MallHeader title="购物车"></MallHeader>
	<view class="list">
		
		<block v-if="list.length > 0">
			<view class="item" v-for="(item, i) of list" :key="i">
				<view class="shop-name">
					<checkbox-group @change="shopChange(i)">
						<label class="radio"><checkbox value="r2" :checked="item.check" /></label>
					</checkbox-group>
					{{ item.name }}
				</view>
				<view class="goods-list">
					<view class="goods-item" v-for="(a, index) in item.children" :key="index">
						<checkbox-group @change="onChange(i, index)">
							<label class="radio"><checkbox value="r2" :checked="a.check" /></label>
						</checkbox-group>
						<view class="'goods-img-box">
							<image :src="a.goods_image" class="goods-img" mode=""></image>
						</view>
						<view class="goods-info">
							<view class="goods-title">
								{{ a.goods_name }}
							</view>
							<view class="goods-params">
								<text class="label" v-for="(b, i) of a.tabs" :key="i">
									{{ b }}
								</text>
							</view>
							<view class="goods-action">
								<view class="goods-tips">
									CD ￥ <text class="int">{{ a.goods_sku.goods_price.toString().split('.')[0] }}</text>.{{ a.goods_sku.goods_price.toString().split('.')[1] }}
								</view>
								<view class="goods-number">
									<view class="icon" @click="reduce(i, index, b)">-</view>
									<input type="number" :value="a.total_num" class="number-input"/>
									<view class="icon" @click="add(i, index, b)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	
		<view class="empty" v-if="empty">
			<img src="/mall/static/images/no-goods.png" alt="">
			暂无相关商品
		</view>
	</view>
	<view class="cart-fixed-box">
		<view class="goods-total">
				<checkbox-group @change="onTotal">
					<label class="radio"><checkbox value="r2" :checked="is_total" />全选</label>
				</checkbox-group>
		</view>
		
		<view class="cart-info">
			<view class="item1">
				总计： <text class="price">CD ￥ <text class="int">{{ total }}</text>.00</text>
			</view>
			<view class="item2">
				运费总计：{{ info.express_price }} 元
			</view>
		</view>
		<view class="cart-btn" @click="submit()">
			结算({{totalNum}})
		</view>
	</view>
	
	<MallFoot :on="2"></MallFoot>
</view>
</template>

<script>
	import MallHeader from '@/components/mallHeader/mallHeader';
	import MallFoot from '@/components/mallFoot/mallFoot'
	import {cartList, isLogin, shopDetail, cardAdd, cardsub} from '@/api/substitution.js'
	
	export default {
		components:{
			MallFoot,
			MallHeader
		},
		data(){
			return {
				list: [],
				
				total: 0,
				
				info: '',
				
				totalNum: 0,  // 货品数量
				
				is_total: true,  // 全选 / 反选
				
				empty: false,
			}
		},
		onLoad(){
			isLogin();
			
			this.cart()
		},
		methods:{
			
			// 获取购物车列表
			cart () {
				cartList('').then(res => {
					this.info = res.data;
					if (res.data.goods_list.length === 0) {
						this.empty = true
					} else {
						res.data.goods_list.forEach(item => {
							item.check = true
							shopDetail({
								shop_id: item.shop_id
							}).then(r => {
								const result = this.list.some(item => {
									if (item.name === r.data.detail.shop_name) return true
								})
								
								if (!result) {
									this.list.push({
										name: r.data.detail.shop_name,
										id: r.data.detail.shop_id,
										check: true,
										children: []
									})
								}
								this.list.forEach(i => {
									if (i.id === item.shop_id) {
										i.children.push(item)
									}
								})
								this.total += item.total_num * item.goods_sku.goods_price
								this.totalNum += item.total_num
							})
						})
					}
				})
			},
			
			// 切换商铺选中
			shopChange(e) {
				this.list[e].check = !this.list[e].check;
				if (this.list[e].check) {
					this.list[e].children.forEach(item => {
						item.check = true
					})
				} else {
					this.list[e].children.forEach(item => {
						item.check = false
						this.total = this.total - item.goods_sku.goods_price * item.total_num
						this.totalNum = this.totalNum - item.total_num
					})
				}
				this.onAll()
				this.allList()
			},
			
			// 计算总价
			allList () {
				this.list.forEach(item => {
					item.children.forEach(i => {
						if (i.check) {
							this.total += i.total_num * i.goods_sku.goods_price
							this.totalNum += i.total_num
							console.log(1)
						}
					})
				})
			},
			
			// 修改商品状态
			onChange(i, e) {
				this.list[i].children[e].check = !this.list[i].children[e].check;
				if (this.list[i].children[e].check) {
					this.total = this.total + this.list[i].children[e].goods_sku.goods_price * this.list[i].children[e].total_num
					this.totalNum = this.totalNum + this.list[i].children[e].total_num
				} else {
					this.total = this.total - this.list[i].children[e].goods_sku.goods_price * this.list[i].children[e].total_num
					this.totalNum = this.totalNum - this.list[i].children[e].total_num
				}
				this.single(i)
				this.onAll()
			},
			
			// 判断该商品当前所有商品是否勾选
			single(i) {
				let arr = [];
				
				this.list[i].children.forEach(item => {
					if (item.check) {
						arr.push(item)
					}
				})
				
				if (arr.length > 0) {
					this.list[i].check = true
				} else {
					this.list[i].check = false
				}
			},
			
			// 判断是否全选
			onAll () {
				const arr = []
				let arrLength = 0;
				this.list.forEach(item => {
					arrLength += item.children.length
					item.children.forEach(i => i.check ? arr.push(i) : '')
				})
				this.is_total = arr.length === arrLength
			},
			
			// 新增商品
			add(i, e, item) {
				cardAdd({
					goods_id: this.list[i].children[e].goods_id,
					goods_num: 1,
					goods_sku_id: this.list[i].children[e].goods_sku.spec_sku_id
				}).then(res => {
					this.list[i].children[e].total_num += 1;
					if (this.list[i].children[e].check) {
						console.log(this.list[i].children[e].goods_sku.goods_price)
						this.total = this.total + parseInt(this.list[i].children[e].goods_sku.goods_price)
						this.totalNum += 1
					}
				})
			},
			
			// 全选/反选
			onTotal () {
				this.is_total = !this.is_total;
				this.total = 0
				this.totalNum = 0
				if (this.is_total) {
					this.list.forEach(item => {
						item.check = true
						item.children.forEach(i => {
							i.check = true
						})
					})
				} else {
					this.list.forEach(item => {
						item.check = false
						item.children.forEach(i => {
							i.check = false
						})
					})
				}
				this.allList()
			},
			
			// 减商品
			reduce(i, e, item) {
				if (this.list[i].children[e].total_num > 1) {
					cardsub({
						goods_id: this.list[i].children[e].goods_id,
						goods_sku_id: this.list[i].children[e].goods_sku.spec_sku_id
					}).then(res => {
						this.list[i].children[e].total_num -= 1;
						if (this.list[i].children[e].check) {
							this.total = this.total - parseInt(this.list[i].children[e].goods_sku.goods_price)
							this.totalNum -= 1
						}
					})
				}
			},
			
			// 提交购物车
			submit () {
				const shop_id = [];
				const cart_ids = []
				
				this.list.forEach(item => {
					item.children.forEach(i => {
						if (i.check) {
							shop_id.push(i.shop_id)
							cart_ids.push(i.goods_id + '_' + i.goods_sku_id);
						}
					})
				})
				
				if (cart_ids.length === 0) {
					uni.showToast({
						title: '请勾选需要购买的商品',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '../user/confirmorder?shop_id=' + shop_id.join(',') + '&cart_ids=' + cart_ids.join(',') + '&type=1'
					})
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.page {
		display: flex;
		flex-direction: column;
	}
	.icon-radio{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #CDCDCD;
		border-color: #FE7B47;
		background: #FE7B47;
		margin-right:20rpx;
		.icon-right{
			width:20rpx;
			height: 14rpx;
		}
	}
	.list{
		margin-top: 60rpx;
		padding-bottom: 180rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
		
		.item {
			margin-bottom: 10rpx;
			background-color: #FFFFFF;
		}
		
		.shop-name{
			display: flex;
			align-items: center;
			padding:0 30rpx;
			height: 80rpx;
		}
		.goods-list{
			padding:0 30rpx;
			.goods-item{
				display: flex;
				padding-bottom:25rpx;
				margin-bottom:35rpx;
				align-items: center;
				.goods-img{
					width: 180rpx;
					height: 180rpx;
					margin-right: 30rpx;
				}
				.goods-img-box{
					margin-right: 30rpx;
				}
				.goods-info{
					.goods-title{
						font-size: 32rpx;
						color: #333333;
					}
					.goods-params{
						display: flex;
						margin-top: 20rpx;
						.label{
							display: flex;
							width: 120rpx;
							height: 50rpx;
							align-items: center;
							justify-content: center;
							border-radius: 30rpx;
							border:1rpx solid #EFEFEF;
							color: #333333;
							&+.label{
								margin-left: 10rpx;
							}
						}
					}
					.goods-action{
						display: flex;
						justify-content: space-between;
						align-items: baseline;
						margin-top: 20rpx;
						.goods-tips{
							color: #F13A1D;
							font-size: 26rpx;
							.int{
								font-size: 40rpx;
							}
						}
						.number-input{
							flex:1;
							text-align: center;
						}
						.goods-number{
							display: flex;
							align-items: center;
							height: 60rpx;
							border-radius: 30rpx;
							border:1px solid #EFEFEF;
							width: 200rpx;
							.icon{
								width: 80rpx;
								font-size: 30rpx;
								text-align: center;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}
			.goods-info{
				flex:1;
			}
		}
	}
	.cart-fixed-box{
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		padding:0 30rpx;
		left:0;
		bottom:100rpx;
		height: 120rpx;
		box-shadow: 0px -5rpx 4rpx 0px rgba(51, 51, 51, 0.05);
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		border-bottom:1px solid #EFEFEF;
		.goods-total{
			display: flex;
			align-items: center;
		}
		.cart-info{
			flex:1;
			margin-right: 20rpx;
			text-align: right;
			.item1{
				.price{
					color: #F13A1D;
					font-size: 26rpx;
					.int{
						font-size: 40rpx;
					}
				}
			}
			.item2{
				color: #999999;
				font-size: 26rpx;
				margin-top: 4rpx;
			}
		}
		.cart-btn{
			@include  btnStyle(200,80);
			@include bgGradient();
			@include  flexCenter();
			font-size: 34rpx;
		}
		
		
	}
	
	/deep/ .uni-checkbox-input {
		background-color: transparent;
		border: 1px solid #ccc !important;
		width: 21px;
		height: 21px;
		border-radius: 50%;
		
		&.uni-checkbox-input-checked {
			background-color: #FE7B47 !important;
			border: 1px solid #FE7B47 !important;
			color: #FFFFFF !important;
		}
	}
	
	.empty {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: gray;
			
		img {
			width: 300rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
